<template>
	<el-dialog
		class="alarm"
		:title="getAddress(props.curAlarm) + `(${props.curAlarm.eventId})`"
		v-model="props.dialogVisible"
		width="1200"
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		:append-to-body="true"
		@close="closeDialog"
		align-center
		destroy-on-close
		draggable
	>
		<div class="layoutBox">
			<div class="viewBox">
				<!-- 实时观看 -->
				<video-webrtc
					v-if="state.viewType == 1 && props.type == 'undone'"
					:deviceCode="props.curAlarm.deviceCode"
					class="image rtc"
					viewType="live"
					key="live"
				/>

				<!-- 报警历史视频 -->
				<video v-if="state.viewType == 2" :src="state.videoUrl" style="width: 100%; aspect-ratio: 16/9" controls autoplay />

				<!--  实时回看 -->
				<video-webrtc-playback
					v-if="state.viewType == 3 && props.type == 'undone'"
					:deviceCode="props.curAlarm.deviceCode"
					class="image rtc"
					key="review"
					ref="playbackRef"
				/>

				<!-- 报警图片 -->
				<img v-if="state.viewType == 4" :src="getFileUrl(curAlarm.url)" />
			</div>

			<section class="handleBox">
				<nav class="viewTypeBox">
					<div :class="{ on: state.viewType == 4 }" @click="state.viewType = 4"><span>处理报警</span></div>
					<div :class="{ on: state.viewType == 2 }" @click="state.viewType = 2"><span>报警文件</span></div>
					<div v-if="props.type == 'undone'" :class="{ on: state.viewType == 3 }" @click="state.viewType = 3"><span>回放</span></div>
					<div v-if="props.type == 'undone'" :class="{ on: state.viewType == 1 }" @click="state.viewType = 1"><span>实时观看</span></div>
				</nav>

				<div class="viewContent">
					<!-- 实时播放 -->
					<talkback :cur-alarm="props.curAlarm" class="talkback" v-if="state.viewType == 1 && props.type == 'undone'" />

					<!-- 事件 上传文件 -->
					<eventVideo :cur-alarm="props.curAlarm" v-if="state.viewType == 2" @video="getVideoUrl" />

					<!-- 回放 -->
					<playback :cur-alarm="props.curAlarm" v-if="state.viewType == 3 && props.type == 'undone'" @startplayback="doPlayback" />

					<!-- 报警处理 -->
					<eventForm :cur-alarm="props.curAlarm" :type="props.type" v-if="state.viewType == 4" @done="eventDone" />
				</div>
			</section>
		</div>
	</el-dialog>
</template>

<script lang="ts" setup name="alarmDialog">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
// import videoWebrtc from '../myVideo/video-webrtc.vue';
import videoWebrtc from '../myVideo/webrtc/video-webrtc.vue';
import videoWebrtcPlayback from '../myVideo/webrtc/video-webrtc_playback.vue';
import { useSmoke } from '/@/hook/index';
import { smokeStore } from '/@/stores/smoke';
import talkback from '/@/components/smoke/talkback/talkback.vue';
import playback from '/@/components/smoke/playback/playback.vue';
import eventVideo from '/@/components/smoke/eventVideo/eventVideo.vue';
import eventForm from '/@/components/smoke/eventForm/eventForm.vue';

const playbackRef = ref()

const { getAddress, getFileUrl } = useSmoke();
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: true,
	},

	curAlarm: {
		type: Object,
		default: function () {
			return {};
		},
	},

	type: {
		type: String,
		default: 'undone', // done undone
	},
});

const state = reactive({
	viewType: 4, // 1,实时 2,回看 3,历史 4，处理
	canTalkback: true,
	beforeTime: 2,
	videoUrl: '',
});

const wsConn = smokeStore().wsConn;
const emit = defineEmits(['close']);

onMounted(() => {});

// 过滤掉刚刚处理的ws消息，
function updateMsg() {
	smokeStore().removeAlarmMsg(props.curAlarm.eventId);

	// let unHandleMsg = this.msgList.filter((item: any) => {
	// 	return item.lastUploadTime !== this.curAlarm.lastUploadTime;
	// });
	// this.$store.commit('smoke/setAlarmMsg', unHandleMsg);
}

function closeDialog() {
	emit('close');
}

function getVideoUrl(url: string) {
	state.videoUrl = url;
}

function  doPlayback(startTime:number){
	// console.log(startTime);

	playbackRef.value.wsGetVideo(startTime)
	
}

// 完成事件处理
function eventDone() {
	updateMsg();
	closeDialog();
}
</script>
<style lang="scss" scoped>
.layoutBox {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	--navBgColor: #d9ecff;
	--navOnColor: #409eff;

	.viewBox {
		width: 760px;
		aspect-ratio: 16/9;
		text-align: center;
		overflow: hidden;
		// background-color: #e9e9eb;
		border-radius: 5px;
	}

	img {
		width: 100%;
		height: 100%;
		aspect-ratio: 16/9;
	}

	.handleBox {
		width: 420px;
		overflow: hidden;
		border: 1px solid #eee;
		border-radius: 5px;
	}
}

.talkback {
	margin: 20px auto;
}

.viewTypeBox {
	// background: #eee;
	display: flex;
	border-bottom: 1px solid #eee;
	padding: 0 20px;
	box-sizing: border-box;

	div {
		padding: 0 15px;
		font-size: 14px;
		line-height: 30px;
		position: relative;
		background-color: var(--navBgColor);
		// margin: 0 20px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		transform: perspective(30px) rotateX(10deg);
		transform-origin: center bottom;
		margin: 0 -1px;
		cursor: pointer;
		white-space: nowrap;

		+ span {
			transform: perspective(-30px) rotateX(-10deg);
			transform-origin: center bottom;
			position: relative;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			bottom: 0;
			// background-color: var(--navBgColor);
		}

		&::before {
			left: -10px;
			background: radial-gradient(circle at 0 0, transparent 10px, var(--navBgColor) 10px);
		}

		&::after {
			right: -10px;
			background: radial-gradient(circle at 100% 0, transparent 10px, var(--navBgColor) 10px);
		}
	}

	.on {
		color: #fff;
		background-color: var(--navOnColor);
		z-index: 10;

		&::before {
			left: -10px;
			background: radial-gradient(circle at 0 0, transparent 10px, var(--navOnColor) 10px);
		}

		&::after {
			right: -10px;
			background: radial-gradient(circle at 100% 0, transparent 10px, var(--navOnColor) 10px);
		}
	}
}

.viewContent {
	height: 380px;
	overflow-y: scroll;
}
</style>
